<template>
	<view>
		<view class="list_item" v-for="(item, i) in list" :key="i" @click="toDetail(item.id)">
			<view class="item_title">{{item.leaveArea}}-{{item.goArea}}</view>
			<view class="flex_start item_time">
				<view class="">{{item.leaveTime}} <text>出发</text></view>
				<view class="item_price">{{item.price}} <text class="company">元</text></view>
			</view>
			<view class="flex_start item_info">
				<view class="flex_start">
					<image src="../../../static/img/default.png" class="photo" mode=""></image>
					<view class="">
						<view class="name">{{item.name}}</view>
						<view class="">电话:{{item.phone}}</view>
					</view>
				</view>
				<view class="btn flex_start btn_o" v-if="item.status == 1 || item.status == 2">接单中</view>
				<view class="btn flex_start btn_r" v-else-if="item.status == 6">售后中</view>
				<view class="btn flex_start btn_c" v-if="item.status == 3">已完成</view>
				<view class="btn flex_start btn_c" v-if="item.status == 5">未完成</view>
				<view class="btn flex_start btn_c" v-if="item.status == 4">已取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				info:{
					status: 99,
					page:1,
					pageSize: 20
				},
				list: []
			};
		},
		created() {
			this.getList()
		},
		methods:{
			getList(tag){
				this.$utils.requert({
					url: 'driverAcceptList',
					data: this.info,
					type: 'post'
				}).then(res => {
					if (res.code === 1) {
						this.total = Math.ceil(res.data.total / this.info.pageSize)
						if(tag){
							this.list = this.list.concat(res.data.data)
						}else {
							this.list = res.data.data
						}
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/pages/driverSide/driverReceivingOrdersDetail/driverReceivingOrdersDetail?id="+id
				})
			}
		},
		onPullDownRefresh(){ //下拉刷新
			this.info.page = 1
			this.getList()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){ //上垃加载
			if(this.info.page < this.total) {
				this.info.page++
				this.getList(true)
			}
		}
	}
</script>

<style lang="scss">
.list_item{
	margin: 0 30rpx;
	padding: 48rpx 0 40rpx;
	border-bottom: 2rpx solid #E1E1E1;
	.item_info{
		justify-content: space-between;
		align-items: flex-end;
		color: #333333;
		font-size: 24rpx;
		.btn{
			width: 138rpx;
			height: 54rpx;
			justify-content: center;
			font-size: 28rpx;
			color: white;
			border-radius: 5rpx;
		}
		.btn_o{
			background:linear-gradient(-90deg,rgba(255,160,8,1),rgba(255,131,5,1));
		}
		.btn_r{
			background: rgb(254,52,25);
		}
		.btn_c{
			background: #C7C3C3;
		}
		.name{
			font-size: 30rpx;
			margin-bottom: 18rpx;
		}
		.photo{
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			display: block;
			margin-right: 16rpx;
		}
	}
	.item_title{
		font-size: 32rpx;
		color: #323232;
	}
	.item_time{
		font-size: 24rpx;
		color: #838282;
		margin: 28rpx 0 26rpx;
		justify-content: space-between;
		text{
			margin-left: 10rpx;
		}
		.item_price{
			color: #FD9103;
			font-size: 38rpx;
			.company{
				font-size: 28rpx;
			}
		}
	}
}
</style>
